<template>
  <div>
    <div ref="basicCanvas" style="height: 90%; width: 100%"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => [[],[]],
    },
    title: {
      type: String,
      default: "",
    }
  },
  watch: {
    chartData: {
      handler(val){
        this.initChart(val);
      },
      deep: true,
    },
  },
  mounted(){
    this.initChart(this.chartData);
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    async initChart(val) {
      await this.$nextTick();
      if(this.myChart) { this.myChart.dispose() };
      this.myChart = this.$echarts.init(this.$refs.basicCanvas);

      let lineMin = Math.min(...val[1]),
          lineMax = Math.max(...val[1]);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            return `${this.title}：${params[0].data}`
          }
        },
        // grid: [{
        //   left: "20px",
        //   right: "20px",
        //   bottom: "0",
        // },
        // {
        //   left: "20px",
        //   right: "20px",
        //   bottom: "0",
        // }],
        grid: {
          left: "20px",
          right: "20px",
          bottom: "0",
        },
        xAxis: {
          type: "category",
          position: "top",
          data: val[0],          
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "rgb(192,0,0)",
            fontWeight: "600",
          },
          textStyle: {
            fontSize: "26px",
          },
        },
        yAxis: [
          {
            type: "value",
            min: lineMin / 1.05,
            // max: lineMax * 1.05,
            splitLine: { show: false }, //去除网格线
            axisLabel: {
              formatter: "{value}%",
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          },
          {
            type: "value",
            min: 0,
            max: 0,
            splitLine: { show: false }, //去除网格线
            axisLabel: {
              formatter: "{value}%",
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          }
        ],
        series: [
          {
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            data: val[1],
            color: "rgb(0,112,192)",
            lineStyle: {
              normal: {
                color: "rgb(0,112,192)",
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "rgb(0,112,192)",
                  },
                  formatter: "{c}",
                },
              },
            },
          },
          {
            type: "bar",
            yAxisIndex: 1,
            data: new Array(val[1].length || 0).fill(1),
            barCategoryGap: '0',
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#ddd",
                borderWidth: 1,
                label: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    async resizeChart(){
      if(this.myChart == null) { return };
      await this.$nextTick();
      this.myChart.resize();
    }
  },
};
</script>
